<template>
	<view>
		<view class="top flex align-center justify-between">
			<text>分销总人数</text>
			<text>{{distributorCount}}人</text>
		</view>
		<view class="searchLetter touchClass">
			<view v-for="item in searchLetter" :key="item.name" :data-letter="item.name" @touchstart.stop="searchStart">{{ changeName(item.name)}}</view>
		</view>
		<scroll-view scroll-y="true" :style="{height:`${winHeight}px`}" :scroll-top="scrollTop" v-if="!search">
			<view v-for="(value,key) in cityList" :key="key">
				<view class="list_letter">{{changeName(key)}}</view>
				<view class="item flex align-center justify-between" v-for="item in value" :key="item.id" :data-city="item.name"
				 @tap="bindCity(item)">
					<view class=" flex align-center">
						<image :src="item.avatar"></image>
						<view class=" flex flex-direction">
							<text>{{item.name}}</text>
							<view class="text2 flex align-center">
								<image src="/static/d12.png"></image>
								<text>{{item.regtime}}</text>
							</view>
						</view>
					</view>
					<text>￥{{item.amount}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	import address from './citys.js'
	export default {
		name: "NynCityList",
		props: {
			hot: {
				type: Boolean,
				required: false,
				default: true
			}
		},
		data() {
			return {
				timeSelect: '2020-11',
				timeMonth: '01',
				distributorList: [],
				distributorCount: 0,
				distributorListLevel: [],
				distributorLevelCount: 0,
				refreshing: false,
				loadStr: '加载中...',
				fetchPageNum: 1,
				isShowLetter: false, //拖动时，是否显示中间字母
				showLetter: 'A', //中间字母
				searchLetter: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"], //字母检索列表
				itemH: 0, //字母列表的高度
				startPageY: 0, //开始拖动字母时Y坐标
				bHeight: 0,
				tHeight: 0,

				scrollTop: 0, //城市列表容器滚动条的位置
				winHeight: 0, //城市列表窗口高度
				cityList: address.cities, //城市列表
				hotList: [], //热门列表
				search: false, //是否搜索
				personList: [],

			}
		},
		created() {
			this.initList()
			console.info("created:" + this.hot)
			this.loadTime()
			if (!this.hot) {
				this.loadDistributorCount()
				this.loadDistributorList()

			} else {
				this.loadDistributorLevelCount()
				this.loadDistributorListLevel()

			}
		},
		onReachBottom() {
			this.loadTime()
			console.log('滑动到页面底部')
			if (!this.hot) {
				this.loadDistributorCount()
				this.loadDistributorList()

			} else {
				this.loadDistributorLevelCount()
				this.loadDistributorListLevel()

			}
		},
		onPullDownRefresh() {
			this.loadTime()
			console.log('下拉刷新');
			this.refreshing = true;
			if (!this.hot) {
				this.loadDistributorCount()
				this.loadDistributorList()

			} else {
				this.loadDistributorLevelCount()
				this.loadDistributorListLevel()

			}
		},
		onLoad() {
			console.info("onLoad:" + this.hot)
		},
		methods: {
			loadTime: function() {
				this.timeSelect = uni.getStorageSync('yearAndMonth')
				this.timeMonth = uni.getStorageSync('month')
				console.log('loadTime:' + this.timeSelect)
			},
			/**
			 * 一级分销
			 * **/
			loadDistributorList: function() {
				api.get({
					url: 'User/GetDistributorList',
					data: {
						time: this.timeSelect,
						user_id: uni.getStorageSync('user').user_id,
						page: this.refreshing ? 1 : this.fetchPageNum,
						pagesize: 30,
					},
					success: data => {
						console.log('1 loadDistributorList:' + JSON.stringify(data))
						if (data.ErrCode == 0) {
							this.distributorList = data.Response
							for (var i = 0; i < this.distributorList.length; i++) {
								if (this.distributorList[i].reg_time) {
									this.distributorList[i].reg_time = this.distributorList[i].reg_time.replace('T',' ')
									var tempDate = this.distributorList[i].reg_time
									var tempMonth = tempDate.substring(tempDate.indexOf('-') + 1, tempDate.lastIndexOf('-'))
									console.log(tempMonth)
									if (tempMonth == '01') {
										if (this.cityList.A.length <= 0 || (this.cityList.A.length > 0 && this.cityList.A[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.A = this.cityList.A.concat(temp)
										}
									} else if (tempMonth == '02') {
										if (this.cityList.B.length <= 0 || (this.cityList.B.length > 0 && this.cityList.B[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.B = this.cityList.B.concat(temp)
										}
									} else if (tempMonth == '03') {
										if (this.cityList.C.length <= 0 || (this.cityList.C.length > 0 && this.cityList.C[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.C = this.cityList.C.concat(temp)
										}
									} else if (tempMonth == '04') {
										if (this.cityList.D.length <= 0 || (this.cityList.D.length > 0 && this.cityList.D[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.D = this.cityList.D.concat(temp)
										}
									} else if (tempMonth == '05') {
										if (this.cityList.E.length <= 0 || (this.cityList.E.length > 0 && this.cityList.E[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.E = this.cityList.E.concat(temp)
										}
									} else if (tempMonth == '06') {
										if (this.cityList.F.length <= 0 || (this.cityList.F.length > 0 && this.cityList.F[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.F = this.cityList.F.concat(temp)
										}
									} else if (tempMonth == '07') {
										if (this.cityList.G.length <= 0 || (this.cityList.G.length > 0 && this.cityList.G[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.G = this.cityList.G.concat(temp)
										}
									} else if (tempMonth == '08') {
										if (this.cityList.H.length <= 0 || (this.cityList.H.length > 0 && this.cityList.H[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.H = this.cityList.H.concat(temp)
										}
									} else if (tempMonth == '09') {
										if (this.cityList.I.length <= 0 || (this.cityList.I.length > 0 && this.cityList.I[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.I = this.cityList.I.concat(temp)
										}
									} else if (tempMonth == '10') {
										if (this.cityList.J.length <= 0 || (this.cityList.J.length > 0 && this.cityList.J[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.J = this.cityList.J.concat(temp)
										}
									} else if (tempMonth == '11') {
										if (this.cityList.K.length <= 0 || (this.cityList.K.length > 0 && this.cityList.K[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.K = this.cityList.K.concat(temp)
										}
									} else if (tempMonth == '12') {
										if (this.cityList.L.length <= 0 || (this.cityList.L.length > 0 && this.cityList.L[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.L = this.cityList.L.concat(temp)
										}
									}
								} else {
									if (this.cityList.A.length <= 0 || (this.cityList.A.length > 0 && this.cityList.A[0].id != this.distributorList[
											i].id)) {
										var temp = [{
											id: this.distributorList[i].id,
											spell: this.distributorList[i].nick_name,
											name: this.distributorList[i].nick_name,
											amount: this.distributorList[i].amount,
											regtime: this.distributorList[i].reg_time,
											avatar: this.distributorList[i].avatar
										}]
										this.cityList.A = this.cityList.A.concat(temp)
									}
								}
							}
							console.log('loadDistributorList cityList:' + JSON.stringify(this.cityList))
							this.refreshing = false;
							uni.stopPullDownRefresh();
							this.loadStr = ''
						}else{
							this.cityList = []
							this.distributorList = []
							this.refreshing = false;
							uni.stopPullDownRefresh();
							this.loadStr = ''
						}
					}
				});
			},
			/**
			 * 一级分销
			 * **/
			loadDistributorCount: function() {
				api.get({
					url: 'User/GetDistributorCount',
					data: {
						user_id: uni.getStorageSync('user').user_id,
					},
					success: data => {
						console.log('1 loadDistributorCount:' + JSON.stringify(data))
						if (data.ErrCode == 0) {
							this.distributorCount = data.Response
						}
					}
				});
			},
			/**
			 * 二级分销
			 * **/
			loadDistributorListLevel: function() {
				api.get({
					url: 'User/GetDistributorListLevel',
					data: {
						time: this.timeSelect,
						user_id: uni.getStorageSync('user').user_id,
						page: this.refreshing ? 1 : this.fetchPageNum,
						pagesize: 30,
					},
					success: data => {
						console.log('2 loadDistributorListLevel:' + JSON.stringify(data))
						if (data.ErrCode == 0) {
							this.distributorList = data.Response
							for (var i = 0; i < this.distributorList.length; i++) {
								if (this.distributorList[i].reg_time) {
									this.distributorList[i].reg_time = this.distributorList[i].reg_time.replace('T',' ')
									var tempDate = this.distributorList[i].reg_time
									var tempMonth = tempDate.substring(tempDate.indexOf('-') + 1, tempDate.lastIndexOf('-'))
									console.log(tempMonth)
									if (tempMonth == '01') {
										if (this.cityList.A.length <= 0 || (this.cityList.A.length > 0 && this.cityList.A[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.A = this.cityList.A.concat(temp)
										}
									} else if (tempMonth == '02') {
										if (this.cityList.B.length <= 0 || (this.cityList.B.length > 0 && this.cityList.B[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.B = this.cityList.B.concat(temp)
										}
									} else if (tempMonth == '03') {
										if (this.cityList.C.length <= 0 || (this.cityList.C.length > 0 && this.cityList.C[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.C = this.cityList.C.concat(temp)
										}
									} else if (tempMonth == '04') {
										if (this.cityList.D.length <= 0 || (this.cityList.D.length > 0 && this.cityList.D[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.D = this.cityList.D.concat(temp)
										}
									} else if (tempMonth == '05') {
										if (this.cityList.E.length <= 0 || (this.cityList.E.length > 0 && this.cityList.E[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.E = this.cityList.E.concat(temp)
										}
									} else if (tempMonth == '06') {
										if (this.cityList.F.length <= 0 || (this.cityList.F.length > 0 && this.cityList.F[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.F = this.cityList.F.concat(temp)
										}
									} else if (tempMonth == '07') {
										if (this.cityList.G.length <= 0 || (this.cityList.G.length > 0 && this.cityList.G[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.G = this.cityList.G.concat(temp)
										}
									} else if (tempMonth == '08') {
										if (this.cityList.H.length <= 0 || (this.cityList.H.length > 0 && this.cityList.H[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.H = this.cityList.H.concat(temp)
										}
									} else if (tempMonth == '09') {
										if (this.cityList.I.length <= 0 || (this.cityList.I.length > 0 && this.cityList.I[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.I = this.cityList.I.concat(temp)
										}
									} else if (tempMonth == '10') {
										if (this.cityList.J.length <= 0 || (this.cityList.J.length > 0 && this.cityList.J[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.J = this.cityList.J.concat(temp)
										}
									} else if (tempMonth == '11') {
										if (this.cityList.K.length <= 0 || (this.cityList.K.length > 0 && this.cityList.K[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.K = this.cityList.K.concat(temp)
										}
									} else if (tempMonth == '12') {
										if (this.cityList.L.length <= 0 || (this.cityList.L.length > 0 && this.cityList.L[0].id != this.distributorList[
												i].id)) {
											var temp = [{
												id: this.distributorList[i].id,
												spell: this.distributorList[i].nick_name,
												name: this.distributorList[i].nick_name,
												amount: this.distributorList[i].amount,
												regtime: this.distributorList[i].reg_time,
												avatar: this.distributorList[i].avatar
											}]
											this.cityList.L = this.cityList.L.concat(temp)
										}
									}
								} else {
									if (this.cityList.A.length <= 0 || (this.cityList.A.length > 0 && this.cityList.A[0].id != this.distributorList[
											i].id)) {
										var temp = [{
											id: this.distributorList[i].id,
											spell: this.distributorList[i].nick_name,
											name: this.distributorList[i].nick_name,
											amount: this.distributorList[i].amount,
											regtime: this.distributorList[i].reg_time,
											avatar: this.distributorList[i].avatar
										}]
										this.cityList.A = this.cityList.A.concat(temp)
									}
								}
							}
							this.refreshing = false;
							uni.stopPullDownRefresh();
							this.loadStr = ''
						}else{
							this.distributorList = []
							this.cityList = []
							this.refreshing = false;
							uni.stopPullDownRefresh();
							this.loadStr = ''
						}
					}
				});
			},
			/**
			 * 二级分销
			 * **/
			loadDistributorLevelCount: function() {
				api.get({
					url: 'User/GetDistributorLevelCount',
					data: {
						user_id: uni.getStorageSync('user').user_id,
					},
					success: data => {
						console.log('2 loadDistributorLevelCount:' + JSON.stringify(data))
						if (data.ErrCode == 0) {
							this.distributorCount = data.Response
						}
					}
				});
			},
			/* 列表初始化 */
			monthToCha(e) {
				var name;
				switch (e) {
					case "01":
						name = "A"
						break;
					case "02":
						name = "B"
						break;
					case "03":
						name = "C"
						break;
					case "04":
						name = "D"
						break;
					case "05":
						name = "E"
						break;
					case "06":
						name = "F"
						break;
					case "07":
						name = "G"
						break;
					case "08":
						name = "H"
						break;
					case "09":
						name = "I"
						break;
					case "10":
						name = "J"
						break;
					case "11":
						name = "K"
						break;
					case "12":
						name = "L"
						break;
				}
				return name;
			},
			/* 列表初始化 */
			changeName(e) {
				var name;
				switch (e) {
					case "A":
						name = "1月"
						break;
					case "B":
						name = "2月"
						break;
					case "C":
						name = "3月"
						break;
					case "D":
						name = "4月"
						break;
					case "E":
						name = "5月"
						break;
					case "F":
						name = "6月"
						break;
					case "G":
						name = "7月"
						break;
					case "H":
						name = "8月"
						break;
					case "I":
						name = "9月"
						break;
					case "J":
						name = "10月"
						break;
					case "K":
						name = "11月"
						break;
					case "L":
						name = "12月"
						break;
				}
				return name;
			},
			initList() {
				let searchLetter = this.searchLetter
				let hotList = address.hotCities;
				let cityList = address.cities;
				let sysInfo = uni.getSystemInfoSync();
				let winHeight = sysInfo.windowHeight;
				//添加要匹配的字母范围值
				//更加屏幕高度设置子元素的高度
				let itemH = winHeight / searchLetter.length;
				let tempObj = [];
				for (let i = 0; i < searchLetter.length; i++) {
					let temp = {};
					temp.name = searchLetter[i];
					temp.tHeight = i * itemH;
					temp.bHeight = (i + 1) * itemH;
					tempObj.push(temp)
				}
				this.winHeight = winHeight
				this.itemH = itemH
				this.searchLetter = tempObj
				this.cityList = cityList
				this.hotList = hotList
			},
			/* 搜索城市时触发 */
			bindinputCitys(e) {
				let cities = this.cityList;
				let cyits = [];
				for (let key in cities) {
					for (let i = 0; i < cities[key].length; i++) {
						if (cities[key][i].name.search(e.detail.value) != -1 || cities[key][i].spell.search(e.detail.value) != -1) {
							cyits.push(cities[key][i])
						};
					}
				}
				this.search = e.detail.value
				this.cyits = cyits
			},
			/* 检索字母拖动开始 */
			searchStart(e) {
				console.log(e)
				let showLetter = e.currentTarget.dataset.letter;
				let pageY = e.touches[0].pageY;
				console.log(pageY)
				this.setScrollTop(showLetter);
			},

			/* 设置scroll-view滚动距离 */
			setScrollTop(showLetter) {
				let scrollTop = 0;
				let cityList = this.cityList;
				let cityCount = 0;
				let initialCount = 0;
				for (let key in cityList) {
					if (showLetter == key) {
						scrollTop = initialCount * 30 + cityCount * 80;
						break;
					} else {
						initialCount++;
						cityCount += cityList[key].length;
					}
				}
				console.log(scrollTop)
				if (showLetter == "A") {
					this.scrollTop = 0
				} else {
					this.scrollTop = scrollTop
				}
				console.log(this.scrollTop)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		padding: 0 80upx 0 20upx;
		width: 100%;
		height: 90upx;
		background-color: #ffffff;
		border-bottom: solid 1upx #d7d7d7;
	}

	.top>text:nth-child(1) {
		font-size: 28upx;
		color: #000000;
	}

	.top>text:nth-child(2) {
		font-size: 28Upx;
		color: #000000
	}

	.text2 {
		margin-top: 14upx;
	}

	.text2>text {
		font-size: 24upx;
		color: #666666 !important;
	}

	.item>view>view {
		margin-left: 20upx;
	}

	.text2 image {
		width: 24upx;
		height: 24upx;
		margin-right: 15upx;
	}

	.item>text {
		font-size: 24upx;
		color: #000000;
		font-weight: 500;
	}

	.item>view>image {
		border-radius: 50%;
		width: 110upx;
		height: 110upx;
		border: solid 2upx #f6f6f6;
	}

	.item {
		border-bottom: 1upx solid #ddd;
		padding: 0 80upx 0 20upx;
		width: 100%;
		height: 160upx;
		background-color: #fff;
		border-bottom: 1upx;
	}

	.search {
		background-color: #ffffff;
		border: 1px solid #cccccc;
		width: 686rpx;
		border-radius: 100rpx;
		margin: 20rpx auto;
		padding: 4rpx;

		input {
			line-height: 60rpx;
			text-align: left;
			padding-left: 20rpx;
		}
	}

	/* 首字母样式 */
	.searchLetter {
		background-color: #fff;
		position: fixed;
		right: 0;
		top: 10%;
		width: 30px;
		height: 80%;
		text-align: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
		color: #666;
		background-color: transparent;
		z-index: 1;

		view {
			height: 50rpx;
		}
	}

	/* 右边首字母样式 */
	.touchClass {
		color: #666;
		font-size: 24rpx;
	}

	/* 居中显示的选中首字母 */
	.cont_Letter {
		background-color: #666;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 50%;
		left: 50%;
		margin: -50px;
		width: 100px;
		height: 100px;
		border-radius: 10px;
		font-size: 26px;
		z-index: 1
	}

	/* 循环数据首字母检索 */
	.list_letter {
		display: flex;
		background-color: #f8f8f8;
		height: 30px;
		color: #2a2a2a;
		font-size: 26rpx;
		padding-left: 10px;
		align-items: center;
	}

	/* 城市样式 */
	.item_city {
		display: flex;
		background-color: #fff;
		height: 40px;
		padding-left: 10px;
		color: #2a2a2a;
		font-size: 30rpx;
		align-items: center;
		border-bottom: 1px solid #f8f8f8
	}

	.hot {
		background: #ffffff;
		display: flex;
		flex-flow: row wrap;
		padding: 10rpx 15rpx;

		view {
			font-size: 30rpx;
			padding: 10rpx 20rpx;
			border-radius: 50rpx;
			margin-bottom: 20rpx;
		}
	}

	.list {
		.eng {
			background: #ffffff;
			padding: 30rpx;
			color: #212121;
		}

		.text {
			color: #212121;
			font-size: 26rpx;
			margin: 30rpx 0 0 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #E6E6E6
		}
	}
</style>
